<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
    *{
        box-sizing: border-box
    }
    .recommend{
        width: 200px;
        height: 720px;
        border: 1px solid #bbbbbb;
        margin: 0 auto;
    }
    h4{
        margin: 0 auto;
        text-align: center;
        width: 200px;
        height: 50px;
        line-height: 50px;
        background-color: #bbbbbb;
    }
    ul{
        list-style: none;
        margin: 10px;
        padding: 0;
        text-align: center;
    }
    a{
        width: 180px;
        height: 210px;
        display: inline-block;
        text-decoration: none;
         overflow: hidden; 
    }
    li{
        margin: 5px 0 5px 0;
    }
    p{
        background-color: hotpink;
        width: 180px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        margin: -30px 0 0 0;
        padding: 0;
        color: #FFFFFF;
        position: relative;
    }
    span{
        width: 360px;
        height: 180px;
        display: flex;
        position: relative;
    }
    </style>
</head>

<body>
    <div class="recommend">
        <header>
            <h4>专辑推荐</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#"><span><img src="图片切换\1_1.jpg" alt=""><img src="图片切换\1_2.jpg" alt=""></span><p class="p-one">COCOON/可可尼</p><p class="p-two">几何为网-极致绚烂</p></a></li>
                <li><a href="#"><span><img src="图片切换\2_1.jpg" alt=""><img src="图片切换\2_2.jpg" alt=""></span><p class="p-one">INSUN/恩裳</p><p class="p-two">2013春印象</p></a></li>
                <li><a href="#"><span><img src="图片切换\3_1.jpg" alt=""><img src="图片切换\3_2.jpg" alt=""></span><p class="p-one">JNBY/江南布衣</p><p class="p-two">NANMENG/南梦</p></a></li>
            </ul>
        </nav>
    </div>



    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $(function(){

    $('a').hover(function(){
        $(this).find('span').stop().animate({left:-180,},500);
         $(this).find('.p-one').stop().animate({top:40,},500);
        $(this).find('.p-two').stop().animate({top:-30,},500);
    },function(){
        $(this).find('span').stop().animate({left:0,},500);
       $(this).find('.p-one').stop().animate({top:0,},500)
        $(this).find('.p-two').stop().animate({top:0,},500);
    })  






    })
</script>